{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "\n",
    "pn.extension('echarts')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``Gauge`` is a value indicator providing a visual representation of a value as a gauge or speed-o-meter. The `Gauge` is rendered using the ECharts library so when working in the notebook, ensure you load 'echarts' in `pn.extension`.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
    "\n",
    "* **``annulus_width``** (int, default=10): Width of the gauge annulus.\n",
    "* **``bounds``** (tuple, default=(0, 100)): The upper and lower bound of the dial.\n",
    "* **``colors``** (list): Color thresholds for the Gauge, specified as a list of tuples of the fractional threshold and the color to switch to.\n",
    "* **``custom_opts``** (dict): Additional options to pass to the ECharts Gauge definition.\n",
    "* **``end_angle``** (float or int, default=-45) Angle at which the gauge ends.\n",
    "* **``format``** str(str, default='{value}%'): Formatting string for the value indicator.\n",
    "* **``num_splits``** (int, default=10): Number of splits along the gauge.\n",
    "* **``show_ticks``** (boolean, default=True): Whether to show ticks along the dials.\n",
    "* **``show_labels``** (boolean, default=True): Whether to show tick labels along the dials.\n",
    "* **``start_angle``** (float or int, default=225): Angle at which the gauge starts.\n",
    "* **``tooltip_format``** (str, default='{b} : {c}%'): Formatting string for the hover tooltip.\n",
    "* **``title_size``** (int, default=18): Size of title font.\n",
    "* **``value``** (float or int, default=25): Value to indicate on the gauge a value within the declared bounds.\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The simplest form of a Gauge just requires setting a `value` which must be within the `bounds`. The default formatter and bounds assume you are providing a percentage:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.indicators.Gauge(name='Failure Rate', value=10, bounds=(0, 100))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If we want to display some other value such as the revolutions per minute of an engine we can set a different `bounds` value and override the `format`. Additionally we may also provide a different set of colors defining the threshold points at which the color should change as a fraction of the provided bounds. The `colors` accepts a list of tuples defining the fractions and the color:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.indicators.Gauge(\n",
    "    name='Engine', value=2500, bounds=(0, 3000), format='{value} rpm',\n",
    "    colors=[(0.2, 'green'), (0.8, 'gold'), (1, 'red')]\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "source": [
    "You can also change the color of the needle by passing custom options:"
   ],
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "outputs": [],
   "source": [
    "pn.indicators.Gauge(\n",
    "    name=\"Engine\", value=2500, bounds=(0, 3000), format='{value} rpm',\n",
    "    colors=[(0.2, 'green'), (0.8, 'gold'), (1, 'red')],\n",
    "    custom_opts={\"pointer\": {\"itemStyle\": {\"color\": 'red'}}}\n",
    ")\n"
   ],
   "metadata": {}
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
